<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>赛事视频查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<style>
					* {
					    touch-action: pan-y;
					}
					body{
						background-color: #FFFFFF;
					}
					.mui-control-content {
						background-color: white;
						min-height: 50rem;
					}
					.mui-control-content .mui-loading {
						margin-top: 3.125rem;
					}
					.mui-table-view .mui-media-object{
						height: 6.25rem;
						max-width: 8.125rem;
					}
					.mui-bar-nav{
						position: absolute;
							background-color: #e94709;
							height: 9%;
		
					}
					.top-content{
						position: absolute;
						width: 100%;
						font-size:0.625rem;
						}
						.top-content img{
							width: 100%;					
							}
						.top-logo {
						position: absolute;
						    width: 10%;
							top: 0.625rem;			
								}
						.top-message{
							position: absolute;
							    width: 10%;
							    right: 0%;
								top: 0.3125rem;
						}
						.top-return {
						position: absolute;
						    width: 10%;
						    top: 10px;		
								}
								.top-return img{
								    width: 75%;					
										}
				.mui-input-row{
					overflow: unset;
					left: 10%;
				}
				
				.mui-search input[type=search] {
					      background-color: #f0774a;
					      width: 70%;
					      border-radius: 3.125rem;
					      height: 2.5625rem;
						  color: #ffffff;
				}
				.mui-active::before{
					color: #FFFFFF;
				}
				.mui-search .mui-placeholder{
					color: #595757;	
					line-height: 2.5rem;
					font-size: 0.5375rem;
					width: 45%;
					color: #FFFFFF;
					}	
				.search-icon{
					background-color: #fad6c8;
					    position: absolute;
					    top: 0.375rem;
					    right: 30%;
					    width: 15%;
					    text-align: center;
					    border: 0;
					    height: 2.5625rem;
					    color: #e94709;
					    border-radius: 1.25rem;
					    overflow: hidden;
				}	
					.mui-slider .mui-slider-group .mui-slider-item{
						    width: 105%;
						    padding-right: 1.25rem;
					}
					.mui-slider .mui-slider-group .mui-slider-item img{
						    width: 90%;
						    margin-top:4% ;
							margin-left: 5%;
						    border-radius: 1.25rem;
					}
					.mui-slider{
						margin-top:3rem ;
						z-index: 15;
						overflow: unset;
					}
					.mui-slider-indicator{
					bottom: -1.25rem;
					}
					.mui-slider-indicator .mui-active.mui-indicator{
						background: #ea4609;				
					}
					.mui-slider-indicator .mui-indicator{
						background: #ffcebd;
					}
					.mui-indicator .mui-active{
						background-color:#000000;
					}
					.mui-search .mui-placeholder{
						color: #FFFFFF;			
						}			
					.mui-search .mui-placeholder .mui-icon{
						color: #FFFFFF;
					    line-height: 1.875rem;
					    margin-left: -3.125rem;
					}
					
						.mui-slider-indicator.mui-segmented-control .mui-control-item {
							border-left:1px solid #c1c1c1 ;
							padding: 0 22.5%;
							color: #585858;
						}
						.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
							color: #585858;
							border-bottom: 0;
						}
						
						.mui-bar-tab .mui-tab-item.mui-active{
							color: #ea4609;
						}
		.mui-bar-nav~.mui-content{
			margin-bottom: 10%;
			margin-top: 5%;
		}
		.mui-table-view .mui-media-object{
			max-width: 40%;
		}
		.mui-content{
			background-color: #FFFFFF;
		}
		.addtime{
			padding-top: 0.625rem;
			font-size: 0.625rem;
		}
		.hot-recom{
				background: #FFFFFF;
				height: 25rem;
			}
		.hot-list{
			width: 95%;
			margin-left: 5%;
		}
		.hot-more{
			color: #8f8f94;
		}
		.hot-item {
				width: 45%;
			    float: left;
			    margin-right: 5%;
		}
	
	.hot-item img{
		width: 100%;
		height: 8rem;
	}
		.wonder-more{
			color: #8f8f94;
		}
		.wonder-list{
			width: 95%;
			margin-left: 5%;
		}
		.wonder-item {
				width: 100%;
			    margin-right: 5%;
		}
		
		.wonder-item img{
			width: 95%;
			height: 8rem;
		}
	.mui-icon{
		font-size: 18px;
	}
	.mui-content{
		position: absolute;
		width: 100%;
	}
	.bottom-remind{
		    width: 100%;
		    text-align: center;
		    padding-top: 10%;
			padding-bottom: 20%;
		    font-size: 15px;
		    color: #969696;
	}	
</style>
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<a class="top-return mui-action-back"><img src="images/return.png" ></a>
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="搜索视频">
					<button  onclick="location.href='no.html';"  type="button" class="search-icon">搜索</a>
				</div>				
				
				
			</div>
			
		</header>
		<div class="mui-content">
			
		<div class="hot-recom">
			<p style="padding: 2% 5% ;font-size: 17px;background: #eeeeee;">
			<span class="hot-title">热门推荐</span>
			<a href="#" class="hot-more"><span  style="float: right;">更多></span>	</a>
			</p>
			<div class="hot-list">
				<div  class="hot-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="hot-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="hot-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="hot-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>		
			</div>
			
		</div>
		<div class="wonder-recom">
			<p style="padding: 2% 5% ;font-size: 17px;background: #eeeeee;">
			<span class="wonder-title">精彩播放</span>
			<a href="#" class="wonder-more"><span  style="float: right;">更多></span>	 </a>
			</p>
			<div class="wonder-list">
				<div  class="wonder-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="wonder-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>	
				<div  class="wonder-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="wonder-item">
						<img src="images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
										
			</div>
			<div class="bottom-remind">已显示全部内容</div>
		</div>
		</div>
	<!-- 公共底部start -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item " href="index.html">
			<span class="mui-icon iconfont icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="event.html">
			<span class="mui-icon iconfont icon-qizhi"></span>
			<span class="mui-tab-label">赛事</span>
		</a>
		<a class="mui-tab-item" href="grade.html">
			<span class="mui-icon iconfont icon-svg"></span>
			<span class="mui-tab-label">成绩</span>
		</a>
		<a class="mui-tab-item" href="my.html">
			<span class="mui-icon iconfont icon-copy"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
		</script>
	
	</body>
	
</html>
